/*
* @Author: Administrator
* @Date:   2018-09-12 20:50:54
* @Last Modified by:   Administrator
* @Last Modified time: 2018-09-15 09:28:32
*/
import React from 'react';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom'
import { LoginWrapper, LoginBox, Input, Button } from './style.js';
import { actionCreators } from './store';

class Login extends React.Component {
  render () {
    const { loginStatus } = this.props;
    if (!loginStatus) {
      return (
      <LoginWrapper>
        <LoginBox>
          <div className="login">用户登录</div>
          <Input placeholder="用户名:" innerRef = {(input) => {this.account = input}}></Input>
          <Input placeholder="密码:" innerRef = {(input => {this.password = input})}></Input>
          <Button onClick={() => {this.props.login(this.account,this.password)}}>登录</Button>
        </LoginBox>
      </LoginWrapper>
     )
    }
  	else {
      //Redirect是重定向
       return <Redirect exact from='/login' to="/"/>
    } 
  }
}

const mapState = (state) => ({
  loginStatus: state.getIn(['login', 'login'])
})

const mapDispatch = (dispatch) => ({
  login (a,b) {
    if (!(a.value)) {
      alert('账号不能为空')
    }
    else if (a.value && !(b.value)) {
      alert('密码不能为空')
    }
    else {
      dispatch(actionCreators.login(a.value,b.value));
    }
  }
})

export default connect(mapState,mapDispatch)(Login);